<template>
    <div style="width:100%;height:100%;margin:0px;" :id="id"></div>
</template>

<script>
    import echarts from 'echarts';
    import {theme_blue} from "./theme-blue"
    export default {
        data() {
            return {
                chartInstance: {}
            };
        },
        watch: {
            'option': {
                handler: function (val, oldVal) {
                    if(this.chartInstance){
                        this.chartInstance.setOption(val);
                    }
                },
                deep: true
            }
        },
        props: ["id", "theme", "option"],
        mounted() {
            var _this = this;
            this.$nextTick(() => {
                _this.chartInstance = echarts.init(document.getElementById(this.id), this.theme||theme_blue);// 默认主题:theme_blue
                const defaultoption = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    series: [
                        {
                            name: '一个栗子',
                            type: 'pie',
                            radius: '66%',
                            center: ['50%', '60%'],
                            data: [
                                {value: 2103456, name: 'ios'},
                                {value: 1305923, name: 'android'},
                                {value: 543250, name: 'pc'},
                                {value: 798403, name: 'web'}
                            ],

                        }
                    ]
                };
                _this.chartInstance.setOption(this.option || defaultoption);
                window.addEventListener('resize', function () {
                    _this.chartInstance.resize();
                });
            });
        }
    };
</script>
